<template>
  <div>
    <!-- 警告 -->
    <el-alert title="添加商品信息" center type="info" show-icon></el-alert>
    <!-- 步骤条 -->
    <!-- <el-steps :active="active" finish-status="success" align-center>
      <el-step title="基本信息"></el-step>
      <el-step title="商品参数"></el-step>
      <el-step title="商品属性"></el-step>
      <el-step title="商品图片"></el-step>
      <el-step title="商品内容"></el-step>
      <el-step title="完成"></el-step>
    </el-steps> -->
    <!-- tabs标签页  @tab-click="handleClick"tab被选中时触发-->
    <el-tabs v-model="activeName" :tab-position="tabPosition" :before-leave="tabs">
      <el-tab-pane label="基本信息" name="1">
        <!-- 表单 -->
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="商品名称" prop="goods_name">
            <el-input v-model="ruleForm.goods_name"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" prop="goods_price">
            <el-input v-model="ruleForm.goods_price"></el-input>
          </el-form-item>
          <el-form-item label="商品重量" prop="goods_weight">
            <el-input v-model="ruleForm.goods_weight"></el-input>
          </el-form-item>
          <el-form-item label="商品数量" prop="goods_number">
            <el-input v-model="ruleForm.goods_number"></el-input>
          </el-form-item>
          <el-form-item label="商品分类" prop="goods_cat">
            <!-- 级联选择器 -->
            <el-cascader
              v-model="value"
              :options="sortList"
              :props="props"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="商品参数" name="2">
        <el-checkbox v-for="item in attrarr" :key="item.attr_id" :checked="item.flag">{{ item.name }}</el-checkbox>
      </el-tab-pane>
      <el-tab-pane label="商品属性" name="3">
        <div v-for="item in formlist" :key="item.attr_id">
            <div>{{item.attr_name}}</div>
            <input type="text" :value="item.attr_vals">
        </div>
      </el-tab-pane>
      <el-tab-pane label="商品图片" name="4">
          <!-- list-type="picture"设置预览图片的方式 action： -->
          <el-upload
           class="upload-demo"
           action="https://jsonplaceholder.typicode.com/posts/"
           :on-preview="handlePreview"
           :on-remove="handleRemove"
           :file-list="fileList"
           list-type="picture">
        <el-button size="small" type="primary">点击上传</el-button>
       </el-upload>
      </el-tab-pane>
      <el-tab-pane label="商品内容" name="5">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getCategories, getCategorieslist } from "../../utils/api";
export default {
  data() {
    return {
      fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
      formlist:[], //动态商品参数
      activeName: 0, //tabs当前页面状态
      sortList: [], //级联菜单数据
      attrlist: [], //商品参数列表
      attrarr: [], //静态商品参数
      checked: true, //复选框状态
      props: {
        label: "cat_name",
        value: "cat_id",
      },
      value: [],
      ruleForm: {
        //基本信息表单
        goods_name: "", //商品名称
        goods_price: "", //商品价格
        goods_weight: "", //商品重量
        goods_number: "", //商品数量
        goods_cat: "", //商品分类
      },
      rules: {//基本信息表单校验
        goods_name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        goods_price: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
        ],
        goods_weight: [
          { required: true, message: "请输入商品重量", trigger: "blur" },
        ],
        goods_number: [
          { required: true, message: "请输入商品数量", trigger: "blur" },
        ],
        goods_cat: [
          { required: true, message: "请输入商品分类", trigger: "blur" },
        ],
      },
      active: 0, //步骤条切换
      valueid: [], //级联选中的id
      tabPosition: "left", //设置tabs标签页的方向
      page: {
        pagenum: 1,
        pagesize: 5,
      },
    };
  },
  methods: {
       handleRemove(file, fileList) { //当用户点击图片的右上角的x号是触发该函数
        console.log(file, fileList);
      },
      handlePreview(file) { //当点击图片时会触发该事件进行预览操作，处理图片预览
        console.log(file);
      },
    tabs(activeName, oldActiveName) {
      //切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。\
      if (activeName == 2) {
        //请求静态页面
        let obj = {
          id: this.valueid[2],
          sel: "only",
        };
        getCategorieslist(obj).then((res) => {
          //   console.log(res);
          (this.attrlist = res.data.data),
            //   获取后台响应的复选状态转化为数组
            (this.attrlist = this.attrlist.map((item) => {
              return {
                attr_vals: item.attr_vals.split(",") || [],
              };
            }));
          //   将获取到的复选状态和数据放到一个数组中
          this.attrlist.forEach((item) => {
            item.attr_vals.forEach((ele) => {
              this.attrarr.push({ name: ele, flag: true });
            });
          });
          console.log(this.attrarr);
        });
      }
      if (activeName == 3) {//请求动态页面
        let obj = {
          id: this.valueid[2],
          sel: "many",
        };
        getCategorieslist(obj).then((res) => {
          console.log(res);
          this.formlist=res.data.data
        });
      }
      //如果离开之前的tabs值在基本信息上，就判断用户有没有选择三级分类，选择了就放行，没选择就不允许放行
      if (oldActiveName == 1 && this.valueid.length != 3) {
        this.$message({
          type: "error", // success error warning
          message: "请选择三级分类或者商品名称",
          duration: 2000,
        });
        return false;
      }
    },
    handleChange(value) {
      //级联菜单id
      // console.log(value);
      this.valueid = value;
    },
  },
  created() {
    getCategories(this.page).then((res) => {
      //请求练级选择器数据
      // console.log(res);
      this.sortList = res.data.data.result;
    });
  },
};
</script>
